<template>
    <div class="export-page f-cb">
        <div id="export-demo" class="f-cb">
            <div class="dome-title f-cb">
                <img :src="logo_login" alt="" class="logo fl">
                <span class="fr fonts">{{$t('openChecks.export_page.56lylhuwkyg0')}}</span>
            </div>
            <div class="dome-box">
                <div class="index">
                    <h2>{{$t('openCheck.openCheck30')}}</h2>
                    <dl class="f-cb" v-if="ruleForm.info">
                        <dd>
                            <div class="title">{{$t('vip.vip13')}}：</div>
                            <div class="content">{{ruleForm.info.country_code}}</div>
                        </dd>
                        <dd>
                            <div class="title">{{$t('vip.vip1')}}：</div>
                            <div class="content">{{ruleForm.info.account}}</div>
                        </dd>
                        <dd>
                            <div class="title">{{$t('vip.vip2')}}：</div>
                            <div class="content">{{ruleForm.info.nickname}}</div>
                        </dd>
                        <dd>
                            <div class="title">{{$t('openCheck.openCheck1')}}：</div>
                            <div class="content">
                                <span v-for="(optionsItem,optionsIndex) in accountOption" v-if="String(ruleForm.info.type)==optionsItem.id">
                                        {{optionsItem.value}}
                                    </span>
                            </div>
                        </dd>
                        <dd>
                            <div class="title">{{$t('openCheck.openCheck3')}}：</div>
                            <div class="content">
                                <span v-for="(optionsItem,optionsIndex) in cardMode" v-if="String(ruleForm.info.user_type)==optionsItem.id">
                                        {{optionsItem.value}}
                                    </span>
                            </div>
                        </dd>
                    </dl>
                </div>
                <div class="index" v-for="(item,index) in ruleForm.page" :key="index">
                    <h2>{{item["name_" + $store.state.settings.langTail]}}</h2>
                    <dl class="f-cb">
                        <div v-for="(contItem,contIndex) in item.fields" :key="contIndex" v-if="!['firstTitle','textarea','text'].includes(contItem.type)">
                            <dd v-if="['radio','checkbox'].includes(contItem.type) && formShow(item.id, contItem.name)" class="f-cb width100">
                                <div class="title block">{{contItem['title_'+langSufx]}}：</div>
                                <div v-for="(checkItem,checkIndex) in contItem.options" :key="checkIndex" class="checkbox" :class="ruleForm.data['page_' + item.id][contItem.name].includes(checkItem.value)?'hover':''" v-html="backTitle(checkItem['title_'+langSufx])">
                                </div>
                            </dd>
                            <dd v-else-if="['switch'].includes(contItem.type) && formShow(item.id, contItem.name)" class="f-cb width100">
                                <div  class="checkbox" :class="ruleForm.data['page_' + item.id][contItem.name]?'hover':''" v-html="backTitle(contItem['title_'+langSufx])">
                                </div>
                            </dd>
                            <dd v-else-if="['identCards'].includes(contItem.type) && formShow(item.id, contItem.name)" class="f-cb width100">
                                <div class="title">{{contItem['title_'+langSufx]}}：</div>
                                <div class="content">
                                    <img :src="ruleForm.data['page_' + item.id][contItem.name]" alt="" class="image">
                                </div>
                            </dd>
                            <dd v-else-if="['input-images'].includes(contItem.type) && formShow(item.id, contItem.name)" class="f-cb">
                                <div class="title">{{contItem['title_'+langSufx]}}：</div>
                                <div class="content">
                                    <img :src="ruleForm.data['page_' + item.id][contItem.name]" alt="" class="image" v-if="isImg(ruleForm.data['page_' + item.id][contItem.name]) == 'image'">
                                    <span v-else>{{ruleForm.data['page_' + item.id][contItem.name]}}</span>
                                </div>
                            </dd>
                            <dd v-else-if="['upload'].includes(contItem.type) && formShow(item.id, contItem.name)" class="f-cb width100">
                                <div class="title">{{contItem['title_'+langSufx]}}：</div>
                                <img :src="ruleForm.data['page_' + item.id][contItem.name]" alt="" class="image" v-if="typeof(ruleForm.data['page_' + item.id][contItem.name]) == 'string'">
                                <div v-else>
                                    <img :src="imgItem" alt="" v-for="(imgItem,imgIndex) in ruleForm.data['page_' + item.id][contItem.name]" :key="imgIndex" class="imgItem">
                                </div>
                            </dd>
                            <dd v-else-if="['select'].includes(contItem.type) && formShow(item.id, contItem.name)">
                                <div class="title">{{contItem['title_'+langSufx]}}：</div>
                                <div class="content">
                                    <span v-for="(optionsItem,optionsIndex) in contItem.options" v-if="ruleForm.data['page_' + item.id][contItem.name]==optionsItem.value">
                                        {{optionsItem['title_'+langSufx]}}
                                    </span>
                                    <span v-if="contItem.name=='chargeCurrency'">HKD</span>
                                </div>
                            </dd>
                            <dd v-else-if="['video'].includes(contItem.type) && formShow(item.id, contItem.name)" class="f-cb width100">
                                <div class="title">{{contItem['title_'+langSufx]}}：</div>
                                <div class="content">
                                    <!-- <div class="video">
                                        <video :src="ruleForm.data['page_' + item.id][contItem.name]" class="videocont" />
                                        <img src="@/assets/images/export02.png" class="icons">
                                    </div> -->
                                    {{ruleForm.data['page_' + item.id][contItem.name]}}
                                </div>
                            </dd>
                            <div v-else-if="['row'].includes(contItem.type)">
                                <dd v-for="(containerI,containerindex) in contItem.container" :key="containerindex"  :class="['radio','switch','checkbox','identCards'].includes(containerI.type)?'width100':''" v-if="!['firstTitle','textarea','text'].includes(containerI.type) && formShow(item.id, containerI.name)">
                                    <div v-if="['radio','checkbox'].includes(containerI.type)" class="f-cb">
                                        <div class="title block">{{containerI['title_'+langSufx]}}：</div>
                                        <div v-for="(checkItem,checkIndex) in containerI.options" :key="checkIndex" class="checkbox" :class="ruleForm.data['page_' + item.id][containerI.name].includes(checkItem.value)?'hover':''" v-html="checkItem['title_'+langSufx]">
                                        </div>
                                    </div>
                                    <div v-else-if="['switch'].includes(containerI.type)" class="f-cb">
                                        <div  class="checkbox" :class="ruleForm.data['page_' + item.id][containerI.name]?'hover':''" v-html="containerI['title_'+langSufx]">
                                        </div>
                                    </div>
                                    <div v-else-if="['identCards'].includes(containerI.type)" class="f-cb">
                                        <div class="title">{{containerI['title_'+langSufx]}}：</div>
                                        <div class="content">
                                            <img :src="ruleForm.data['page_' + item.id][containerI.name]" alt="" class="image">
                                        </div>
                                    </div>
                                    <div v-else-if="['input-images'].includes(containerI.type)" class="f-cb">
                                        <div class="title">{{containerI['title_'+langSufx]}}：</div>
                                        <div class="content">
                                            <img :src="ruleForm.data['page_' + item.id][containerI.name]" alt="" class="image" v-if="isImg(ruleForm.data['page_' + item.id][containerI.name]) == 'image'">
                                            <span v-else>{{ruleForm.data['page_' + item.id][containerI.name]}}</span>
                                        </div>
                                    </div>
                                    <div v-else-if="['select'].includes(containerI.type)">
                                        <div class="title">{{containerI['title_'+langSufx]}}：</div>
                                        <div class="content">
                                            <span v-for="(optionsItem,optionsIndex) in containerI.options" v-if="ruleForm.data['page_' + item.id][containerI.name]==optionsItem.value">{{optionsItem['title_'+langSufx]}}</span>
                                        </div>
                                    </div>
                                    <div v-else class="f-cb">
                                        <div class="title">{{containerI['title_'+langSufx]}}：</div>
                                        <div class="content">{{ruleForm.data['page_' + item.id][containerI.name]}}</div>
                                    </div>
                                </dd>
                            </div>
                            <dd v-else-if="formShow(item.id, contItem.name)" class="f-cb">
                                <div class="title">{{contItem['title_'+langSufx]}}：</div>
                                <div class="content">{{ruleForm.data['page_' + item.id][contItem.name]}}</div>
                            </dd>
                        </div>   
                    </dl>
                </div>
                <div class="index" v-if="ruleForm.info && ruleForm.info.is_upgrade == 1 && ruleForm.info.upgrade_status == 1">
                    <h2>{{$t('commonjs.commonjs30')}}</h2>
                    <dl class="f-cb">
                        <dd>
                            <div class="title">{{$t('openCheck.openCheck1')}}：</div>
                            <div class="content">{{$t('commonjs.commonjs6')}}</div>
                        </dd>
                    </dl>
                </div>
                <div class="index" v-if="ruleForm.info">
                    <h3>{{$t('openCheck.openCheck31')}}：{{$t('openCheck.openCheck19')}}</h3>
                    <h4>{{$t('openCheck.openCheck32')}}：{{ruleForm.info.securities_account}}</h4>
                </div>
            </div>
        </div>
        <div style="height:80px"></div>
        <div class="export-btns f-cb">
            <div class="btns fr" v-print="printObj"><span>{{$t('openChecks.export_page.56lylhuwxak0')}}</span></div>
        </div>
    </div>
</template>
<script>
    import {CusInfo} from "@/api/openList/openCheck";
    import {CusInfo1} from "@/api/openList/cashCheck";
    import {CusInfo2} from "@/api/openList/meetSite";
    import router from '@/router'
    import html2canvas from 'html2canvas';
    import JsPDF from 'jspdf';
    import {
        accountOption,
        cardMode,
    } from "@/assets/js/common";
    export default {
        name: 'PdfDemo',
        data () {
            return {
                rowID:"",
                ruleForm:{},
                ruleSubForm:{},
                accountOption,
                cardMode,
                printObj: {
                    id: "export-demo",
                    popTitle:'',
				}
            };
        },
        computed: {
            langSufx() {
                return this.$store.state.settings.langTail;
            },
            export_data(){
                //type:1 开户审核  2:入金审核  3:现场见面
                //rowID 详情id
                return JSON.parse(localStorage.getItem('export_data'))
            },
            logo_login(){
                return localStorage.getItem('logo_login')
            }
        },
        mounted(){
            this.getInfo(this.export_data.rowID,this.export_data.type)
        },
        methods: {
            getInfo(rowID,type) {
                if (type == 1) {
                    CusInfo(rowID)
                    .then((res) => {
                        if (res.code == 10000) {
                        this.rowID = rowID;
                        this.ruleForm = res.data;
                        this.ruleSubForm = res.data.info;
                        res.data.info.fail_info.forEach((item) => {
                            item.listID = item.list;
                            if (item.list.length != 0) {
                            let Reastring = "";
                            item.list.forEach((key, index) => {
                                if (index != item.list.length - 1) {
                                Reastring +=
                                    key["reason_" + this.$store.state.settings.langTail] +
                                    "，";
                                } else {
                                Reastring +=
                                    key["reason_" + this.$store.state.settings.langTail];
                                }
                            });
                            item.Reastring = Reastring;
                            }
                        });
                        if (
                            (res.data.info && res.data.info.fail_info.length == 0) ||
                            res.data.info.open_status == 3
                        ) {
                            this.ruleSubForm.fail_info = [
                            {
                                page_id: "",
                                listID: [],
                            },
                            ];
                        }
                        this.visible = true;
                        this.changeTitle();
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                    .catch((error) => {
                        this.$message.error(error.Error);
                    });
                } else if (type == 2) {
                    CusInfo1(rowID)
                    .then((res) => {
                        if (res.code == 10000) {
                            this.rowID = rowID;
                            this.ruleForm = res.data;
                            this.ruleSubForm = res.data.info;
                            res.data.info.fail_info.forEach((item) => {
                                item.listID = item.list;
                                if (item.list.length != 0) {
                                let Reastring = "";
                                item.list.forEach((key, index) => {
                                    if (index != item.list.length - 1) {
                                    Reastring +=
                                        key["reason_" + this.$store.state.settings.langTail] +
                                        "，";
                                    } else {
                                    Reastring +=
                                        key["reason_" + this.$store.state.settings.langTail];
                                    }
                                });
                                item.Reastring = Reastring;
                                }
                            });
                            if (
                                (res.data.info && res.data.info.fail_info.length == 0) ||
                                res.data.info.open_status == 3
                            ) {
                                this.ruleSubForm.fail_info = [
                                {
                                    page_id: "",
                                    listID: [],
                                },
                                ];
                            }
                            this.visible = true;
                            this.changeTitle();
                        } else {
                        this.$message.error(res.message);
                        }
                    })
                    .catch((error) => {
                        this.$message.error(error.Error);
                    });
                } else if (type == 3) {
                    CusInfo2(rowID)
                    .then((res) => {
                        if (res.code == 10000) {

                            
                            this.rowID = rowID;
                            this.ruleForm = res.data;
                            this.ruleSubForm = res.data.info;
                            res.data.info.fail_info.forEach((item) => {
                                item.listID = item.list;
                                if (item.list.length != 0) {
                                let Reastring = "";
                                item.list.forEach((key, index) => {
                                    if (index != item.list.length - 1) {
                                    Reastring +=
                                        key["reason_" + this.$store.state.settings.langTail] +
                                        "，";
                                    } else {
                                    Reastring +=
                                        key["reason_" + this.$store.state.settings.langTail];
                                    }
                                });
                                item.Reastring = Reastring;
                                }
                            });
                            if (
                                (res.data.info && res.data.info.fail_info.length == 0) ||
                                res.data.info.open_status == 3
                            ) {
                                this.ruleSubForm.fail_info = [
                                {
                                    page_id: "",
                                    listID: [],
                                },
                                ];
                            }
                            this.visible = true;
                            console.log(11111)
                            this.changeTitle();
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                    .catch((error) => {
                        this.$message.error(error.Error);
                    });
                }
            },
            formShow(id, name) {
                if (!this.ruleForm.data["page_" + id]?.[name] == "") {
                    return true;
                } else {
                    return false;
                }
            },
            backTitle(text){
                var htmlStr   = text;
                var reg0 = new RegExp("#.*?#", "g");
                var array = htmlStr.match(reg0);
                let content = htmlStr;
                if(array && array.length !==0){
                    for (let index = 0; index < array.length; index++) {
                        const element = array[index];
                        var  str = element.replace(/#/g,'')
                       content = content.replace(element,`<span  class="blueColor isClick">${str}</span>`)
                      
                    }
                }
                return content
            },
            isImg(isUrl) {
                if (isUrl) {
                    if (
                    /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i.test(
                        isUrl
                    )
                    ) {
                    return "image";
                    } else {
                    return "input";
                    }
                } else {
                    return false;
                }
            },
            isShowRow(data, item, Bitem) {
                // list 表示 获取行容器里面name表示的那一个
                var list = Bitem.fields.find(
                    (items) => items.name == item.config.keyName
                );
                // 当list存在且属于身份证类型 且data有数据时，显示row
                if (
                    list &&
                    list.type == "identCards" &&
                    data[item.config.keyName] !== ""
                ) {
                    return true;
                }
                // 当不属于身份证时，行容器 keyValue的值 和data的值存在且相等，显示row， 否则不显示
                if (
                    item.config.keyValue &&
                    data[item.config.keyName] &&
                    item.config.keyValue == data[item.config.keyName]
                ) {
                    return true;
                } else {
                    return false;
                }
            },
            downloadPDF(ele, pdfName){
                document.documentElement.scrollLeft = 0;
                document.documentElement.scrollTop = 0;
                let eleW = ele.offsetWidth;// 获得该容器的宽
                let eleH = ele.offsetHeight;// 获得该容器的高
                let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
                let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
                var canvas = document.createElement("canvas");
                var abs = 0;

                let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
                let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
                var $this = this;

                if(win_out>win_in){
                    // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
                    abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半
                    // console.log(a, '新abs');
                }
                canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
                canvas.height = eleH * 2;
                var context = canvas.getContext("2d");
                context.scale(2, 2);
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
                // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
                // translate的时候，要把这个差值去掉
                html2canvas( ele, {
                    dpi: 300,
                    // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
                    useCORS:true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
                }).then( (canvas)=>{
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;
                    //一页pdf显示html页面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    //未生成pdf的html页面高度
                    var leftHeight = contentHeight;
                    //页面偏移
                    var position = 0;
                    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 595.28;
                    var imgHeight = 595.28/contentWidth * contentHeight;
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    var pdf = new JsPDF('', 'pt', 'a4');
                    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                        // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
                    } else {    // 分页
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            
                            //避免添加空白页
                            if(leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    //可动态生成
                    pdf.save(pdfName);
                })
            },
            downPdf (title) {
                // 获取dom高度、宽度
                document.documentElement.scrollLeft = 0;
                document.documentElement.scrollTop = 0;
                document.getElementsByTagName('body')[0].classList.add('ovhc');

                var shareContent = document.querySelector('#export-demo')
                var width = shareContent.offsetWidth / 2
                var height = shareContent.offsetHeight / 2
                let _this = this
                html2canvas(document.querySelector('#export-demo'),  {
                    dpi: 300,
                    // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
                    useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
                }).then( (canvas)=>{
                    var context = canvas.getContext('2d')
                    context.mozImageSmoothingEnabled = false
                    context.webkitImageSmoothingEnabled = false
                    context.msImageSmoothingEnabled = false
                    context.imageSmoothingEnabled = false
                    var pageData = canvas.toDataURL('image/jpeg', 1.0)
                    var img = new Image()
                    img.src = pageData
                    img.onload = function () {
                        // 获取dom高度、宽度
                        img.width = img.width / 2
                        img.height = img.height / 2
                        img.style.transform = 'scale(0.5)'
                        if (width > height) {
                            // 此可以根据打印的大小进行自动调节
                            var pdf = new JsPDF('l', 'mm', [
                                width * 0.505,
                                height * 0.545
                            ])
                        } else {
                            var pdf = new JsPDF('pt', 'mm', [
                                width * 0.505,
                                height * 0.545
                            ])
                        }
                        pdf.addImage(
                            pageData,
                            'jpeg',
                            0,
                            0,
                            width * 0.505,
                            height * 0.545
                        )
                        pdf.save(title)
                        document.getElementsByTagName('body')[0].classList.remove('ovhc');
                    }
                   
                    // background: '#0B1A48'
                })
            },
            changeTitle(){
                console.log(this.ruleForm.info.real_name+'_'+this.ruleForm.info.account+'_'+this.$t('openChecks.export_page.56lylhuwkyg0'))
                window.document.title = this.$t('openChecks.export_page.56lylhuwxak1')+'_'+this.ruleForm.info.real_name
                this.printObj.popTitle = this.$t('openChecks.export_page.56lylhuwxak1')+'_'+this.ruleForm.info.real_name
                console.log(this.printObj.popTitle,document.title)
            },
            handleDown(){
                //this.downloadPDF(document.querySelector('#export-demo'),this.$t('openChecks.export_page.56lylhuwkyg0'))
                // this.downPdf(this.ruleForm.info.real_name+'_'+this.ruleForm.info.account+'_'+this.$t('openChecks.export_page.56lylhuwkyg0'));
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .ovhc{
        overflow: hidden;
        height: 100%;
    }
    #export-demo{
        width:1024px;
        margin:0 auto;
        // background: #f5f5f5;
        .dome-title{
            background: #448EF6;
            padding: 28px 30px;
            .logo{
               height:44px; 
               max-width: 314px;
            }
            .fonts{
                font-size: 32px;
                color: #fff;
                line-height: 44px;
            }
        }
        .dome-box{
            padding:20px 40px 38px;
            .index{
                padding: 30px 0 26px;
                border-bottom:1px solid #E9E9E9;
                h2{
                    font-size: 26px;
                    line-height: 46px;
                    position: relative;
                    padding-left: 20px;
                    font-weight: 500;
                    color: #333333;
                    margin-bottom: 9px;
                }
                h2:after{
                    content: "";
                    width: 5px;
                    height: 24px;
                    background: #448EF6;
                    position: absolute;
                    left: 0;
                    top:50%;
                    margin-top: -12px;
                }
                dl{
                    display: block;
                    
                }
                dd{
                    float: left;
                    width:50%;
                    padding: 9px 20px;
                    box-sizing: border-box;
                    .title{
                        font-size: 18px;
                        color: #666;
                        line-height:28px;
                        float: left;
                    }
                    .title.block{
                        float: none;
                        display: block;
                    }
                    .content{
                        font-size: 18px;
                        color: #666;
                        line-height:28px;
                        float: right;
                        max-width: 271px;
                        text-align: right;
                    }
                    .image{
                        max-width: 300px;
                        height: 140px;
                        float: right;
                    }
                    .checkbox{
                        font-size: 18px;
                        color: #333;
                        line-height: 28px;
                        padding: 10px 0 10px 44px;
                        background: url(~@/assets/images/export01.png) no-repeat left 12px;
                        background-size:22px auto;
                    }
                    .checkbox.hover{
                        background: url(~@/assets/images/export01_h.png) no-repeat left 12px;
                        background-size:22px auto;
                    }
                    .blueColor{
                        color: #448EF6;
                    }
                    .imgItem{
                        max-width: 300px;
                        height: 140px;
                        float: right;
                        margin-left: 10px;
                    }
                    .video{
                        width: 242px;
                        height: 148px;
                        position: relative;
                        overflow: hidden;
                        border-radius: 3px;
                        .videocont{
                            max-width: 300%;
                            max-height: 300%;
                            position: absolute;
                            top:50%;
                            left:50%;
                            transform: translate(-50%,-50%);
                            z-index:1;
                            filter: blur(15px);
                        }
                        .icons{
                            max-width: 100%;
                            max-height: 100%;
                            position: absolute;
                            top:50%;
                            left:50%;
                            transform: translate(-50%,-50%);
                            z-index: 2;
                        }
                    }
                }
                dd.width100{
                    width:100%;
                    .content{
                        max-width: 700px;
                    }
                }
                h3{
                    font-size: 26px;
                    color: #333;
                    font-weight: bold;
                    line-height: 46px;
                    text-align: right;
                }
                h4{
                    font-size: 24px;
                    color: #333;
                    font-weight: normal;
                    line-height: 44px;
                    text-align: right;
                }
            }
            .index:last-child{
                border-bottom:none
            }
        }
        .f-cb {
            zoom: 1;
        }
        .f-cb:after {
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
            overflow: hidden;
            content: ".";
        }
    }
    .export-btns{
        width: 984px;
        position: fixed;
        bottom:0;
        left:50%;
        margin-left: -512px;
        padding:20px 20px;
        background: #F8F8F8;
        z-index: 5;
        .btns{
            width: 130px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #448EF6;
            cursor: pointer;
            span{
                padding-left: 24px;
                background: url(~@/assets/images/load.png) no-repeat left center;
                background-size: 20px auto;
                font-size: 20px;
                color: #fff;
            }
        }
    }
</style>
